/*
 * @Date: 2022-03-29 12:55:01
 * @LastEditors: fenglan
 * @LastEditTime: 2022-03-30 15:39:04
 * @FilePath: /payment/pay/src/pages/PayGround/PayGroundList.jsx
 */
import React, { useState } from "react";
import {
  Input,
  Radio,
  Row,
  Col,
  Button,
  Table,
  Checkbox,
  ConfigProvider,
  Popover,
  Modal,
  Form,
  Select,
  Space,
  Popconfirm,
  message,
} from "antd";
import { SearchOutlined, PlusOutlined } from "@ant-design/icons";
import Tab from "../../components/Tabs";
import zhCN from "antd/es/locale/zh_CN";
import Mymodal from "../../components/Mymodal";
import Downscore from "../../components/Mymodal/downscore";
import Upscore from "../../components/Mymodal/upscore";
import Repassword from "../../components/Mymodal/repassword";
export default function PayGroundList() {
  function confirm(e) {
    console.log(e);
    message.success("Click on Yes");
  }

  function cancel(e) {
    console.log(e);
    message.error("Click on No");
  }

  function handleChange(value) {
    console.log(`selected ${value}`);
  }
  const { Option } = Select;
  const columns = [
    {
      title: "用户名",
      width: 100,
      dataIndex: "name",
      key: "name",
      fixed: "left",
    },
    {
      title: "商户名",
      width: 100,
      dataIndex: "age",
      key: "age",
      fixed: "left",
    },
    {
      title: "商户名称",
      width: 100,
      dataIndex: "names",
      key: "names",
      fixed: "left",
    },
    {
      title: "是否代理",
      dataIndex: "address",
      key: "1",
      width: 150,
    },
    {
      title: "总余额",
      dataIndex: "address",
      key: "2",
      width: 150,
    },
    {
      title: "风控余额",
      dataIndex: "address",
      key: "3",
      width: 150,
    },
    {
      title: "可用余额",
      dataIndex: "address",
      key: "4",
      width: 150,
    },
    {
      title: "订单冻结",
      dataIndex: "address",
      key: "5",
      width: 150,
    },
    {
      title: "账号状态",
      dataIndex: "address",
      key: "6",
      width: 150,
      defaultSortOrder: "descend",
      sorter: (a, b) => a.age - b.age,
    },
    {
      title: "在线状态",
      dataIndex: "online",
      key: "7",
      width: 150,
    },
    {
      title: "代付状态",
      dataIndex: "zhuangtai",
      defaultSortOrder: "descend",
      width: 150,
      key: "8",
      sorter: (a, b) => a.age - b.age,
    },
    {
      title: "充值费率(%)",
      dataIndex: "address",
      key: "9",
      width: 150,
    },
  
    {
      title: "开户时间",
      dataIndex: "address",
      key: "12",
      width: 150,
    },

    {
      title: "操作",
      key: "operation",
      fixed: "right",
      width: 100,
      render: () => (
        <Popover content={content}>
          <Button type="primary" style={{ width: "60px" }}>
            操作
          </Button>
        </Popover>
      ),
    },
  ];
  const data = [];
  for (let i = 0; i < 100; i++) {
    data.push({
      key: i,
      name: `Edrward ${i}`,
      age: 32,
      names: 34,
      online: "在线",
      zhuangtai: "正常",
      address: `London Park no. ${i}`,
    });
  }
  const content = (
    <div style={{ width: "200px" }}>
      <Mymodal />

      <Button block>
        <Popconfirm
          title="确认删除行吗?"
          onConfirm={confirm}
          onCancel={cancel}
          okText="确定"
          cancelText="取消"
        >
          <a href="#">删除</a>
        </Popconfirm>
      </Button>

      <Repassword />
      <Upscore />
      <Downscore />
    </div>
  );

  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };

  /* eslint-disable no-template-curly-in-string */
  const validateMessages = {
    required: "${label} is required!",
    types: {
      email: "${label} is not a valid email!",
      number: "${label} is not a valid number!",
    },
    number: {
      range: "${label} must be between ${min} and ${max}",
    },
  };
  /* eslint-enable no-template-curly-in-string */

  const [value, setValue] = React.useState(1);

  const onChange = (e) => {
    console.log("radio checked", e.target.value);
    setValue(e.target.value);
  };

  return (
    <div>
      <Tab title={"商户列表"} />

      <Row style={{ marginTop: "30px" }}>
        <Col span={4}>
          <Input placeholder="用户名/商户号" width="50px" size="large" />
        </Col>

        <Col span={2} style={{ textAlign: "right" }}>
          <Button type="primary" icon={<SearchOutlined />} size="large">
            搜索
          </Button>
        </Col>
        <Col span={2} style={{ textAlign: "right" }}>
          <Button
            type="primary"
            icon={<PlusOutlined />}
            size="large"
            onClick={showModal}
          >
            开户
          </Button>
          <Modal
            title="添加商户"
            visible={isModalVisible}
            onOk={handleOk}
            onCancel={handleCancel}
            width={1000}
          >
            <Form
              {...layout}
              name="nest-messages"
              validateMessages={validateMessages}
            >
              基本信息
              <Form.Item name={["user", "website"]} label="上级代理">
                <Select
                  style={{ width: "100%" }}
                  placeholder="平台"
                  onChange={handleChange}
                >
                  <Option value="jack">Jack</Option>
                  <Option value="lucy">Lucy</Option>
                  <Option value="Yiminghe">yiminghe</Option>
                </Select>
              </Form.Item>
              <Row>
                <Col span={20}>
                  <Form.Item
                    name={["user", "name"]}
                    label="用户名"
                    rules={[{ required: true }]}
                  >
                    <Input placeholder="请输入用户名" />
                  </Form.Item>
                </Col>
                <Col span={3} style={{ marginLeft: "18px" }}>
                  <Form.Item name={["user", "na"]}>
                    <Button type="primary" shape="round">
                      检测是否占用
                    </Button>
                  </Form.Item>
                </Col>
              </Row>
              <Form.Item
                name={["user", "names"]}
                label="商户名"
                rules={[{ required: true }]}
              >
                <Input placeholder="请输入商户名称" />
              </Form.Item>
              <Form.Item name={["user", "users"]} label="卡商">
                <Select style={{ width: "100%" }} placeholder="请选择" />
              </Form.Item>
              <Form.Item
                name={["user", "paswd"]}
                label="登录密码"
                rules={[{ required: true }]}
              >
                <Input placeholder="请输入登录密码" />
              </Form.Item>
              <Form.Item
                name={["user", "passwd"]}
                label="重复登录密码"
                rules={[{ required: true }]}
              >
                <Input placeholder="请输入重复登录密码" />
              </Form.Item>
              <Form.Item
                name={["user", "pass"]}
                label="充值费率(%)"
                rules={[{ required: true }]}
              >
                <Input defaultValue="0" />
              </Form.Item>
              <Form.Item name={["user", "state"]} label="账号状态">
                <Radio.Group onChange={onChange} value={value}>
                  <Radio value={1}>正常</Radio>
                  <Radio value={2}>冻结</Radio>
                </Radio.Group>
              </Form.Item>
              <Row>
                <Col span={12}>
                  <Form.Item name={["user", "sta"]} label="代付状态">
                    <Radio.Group onChange={onChange} value={value}>
                      <Radio value={1}>正常</Radio>
                      <Radio value={2}>冻结</Radio>
                    </Radio.Group>
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item name={["user", "pass"]} label="代理权限">
                    <Radio.Group onChange={onChange} value={value}>
                      <Radio value={1}>关闭</Radio>
                      <Radio value={2}>启用</Radio>
                    </Radio.Group>
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </Modal>
        </Col>
      </Row>
      <ConfigProvider locale={zhCN}>
        <Table
          style={{ marginTop: "20px" }}
          columns={columns}
          dataSource={data}
          scroll={{ x: 2200, y: 300 }}
          rowSelection={{ type: Checkbox }}
        />
      </ConfigProvider>
    </div>
  );
}
